<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <button id="btn1">弹出一个数字</button>
    <button id="btn2">让h1出现数字1到200</button>
    <h1 id="num"></h1>
    <script>
      /* 
            计时器
                setTimeout()
                    - 参数:
                        1.回调函数(要执行的代码) 
                        2.间隔的事件(毫秒)
                    关闭计时器:
                        clearTimeout(计时器的变量)
                setInterval()(每隔一段时间执行一次)
                    - 参数:
                        1.回调函数(要执行的代码) 
                        2.间隔的事件(毫秒)
                    关闭计时器:
                        clearInterval(计时器的变量)
                        
        */
      const btn1 = document.getElementById('btn1');
      const btn2 = document.getElementById('btn2');
      const h1 = document.getElementById('num');
      btn1.addEventListener('click', () => {
        const numTime = setTimeout(() => {
          alert('GG');
        }, 3000);
      });
      let i = 0;
      btn2.addEventListener('click', () => {
        const numTime = setInterval(() => {
          i++;
          h1.textContent = i;
          if (i == 200) {
            clearInterval(numTime);
          }
        }, 1);
      });

      console.log(btn1.onclick);
    </script>
  </body>
</html>
